const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩css代码 配合mini-css-extract-plugin使用
// 当使用了之后js不压缩了  需要使用uglifyjs-webpack-plugin 插件压缩js
const OptimizeCss = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")

module.exports = {
  optimization:{//优化项
    minimizer:[
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true // set to true if you want JS source maps
      }),
      new OptimizeCss({}) //压缩抽离的css代码
    ]
  },
  mode:'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.[hash:8].js',
    path: path.resolve(__dirname,'build')
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      filename:'index.html',
      hash:true
    }),
    //minicssextractplugin插件抽离css文件放入link标签
    new MiniCssExtractPlugin({
      filename:"main.css"
    })
  ],
  module:{
    rules:[
      // postcss-loader可以为css样式属性名加上浏览器前缀
      {test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']},
      {test:/\.scss$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader','sass-loader']}
    ]
  }
}
